<!-- 全国房屋详查数据抽样率情况 -->
<template>
  <!-- 各省(直辖市)详查数据面积抽样率 -->
  <!-- <div class="subheadings">
    <span>各省(直辖市)详查数据{{ showType ? '栋数' : '面积' }}抽样率</span>
    <el-button type="primary" link @click="switchingType">
      {{ showType ? '面积' : '栋数' }}
    </el-button>
  </div> -->
  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="(item, index) in auditType" :key="index" :label="item.label" :name="item.value" />
  </el-tabs>
  <div class="assy">
    <div class="list">
      <!-- <div class="table-data" :key="activeName">
        <vue3-seamless-scroll :hover="true" :hover-stop="true" :list="list" :step="0.2" class="seamless-warp">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <span>{{ item.province }}</span>
            <div class="bar">
              <div class="bar-inner" :style="'width:' + (item.coverage) + '%'"></div>
            </div>
            <span class="rate">{{ item.coverage }}%</span>
          </div>
        </vue3-seamless-scroll>
      </div> -->
      <el-table :data="tableList" :height="200" class="list-table" ref="listTable">
        <el-table-column label="省份" prop="province" align="center"></el-table-column>
        <el-table-column label="面积" prop="area" align="center"></el-table-column>
        <el-table-column label="栋数" prop="dong" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import { getSiftCoverage } from '@/api/housingFacilities.js';
const data = reactive({
  showType: false,//展开收起
  list: [],
  activeName: 'all',
})

const { showType, list, activeName } = toRefs(data)
const auditType = [{ label: '全部', value: 'all' }, { label: '已审核', value: 'audited' }]
const areaAll = ref([]);//面积全部
const areaCheck = ref([]);//面积审核
const dongAll = ref([]);//栋数全部
const dongCheck = ref([]);//栋数审核
const tableList = ref([])
// 初始显示面积的抽样率情况
function init() {
  getSiftCoverage().then((res) => {
    areaAll.value = res.data.areaAll;
    areaCheck.value = res.data.areaCheck;
    dongAll.value = res.data.dongAll;
    dongCheck.value = res.data.dongCheck;
    list.value = areaAll;
    tableList.value = areaAll.value.map(item => {
      item.area = Number(item.coverage) >= 100 ? '-' : item.coverage
      item.dong = dongAll.value.find(v => v.id == item.id).coverage
      return item
    })
  });
}
// 切换统计类型
function switchingType() {
  showType.value = !showType.value
  list.value = showType.value ? dongAll : areaAll;
}
// 挂载完成
onMounted(() => {
  // 初始化数据
  init();
})
// 切换统计类型
const listTable = ref()
function handleClick(tab) {
  if (tab.props.name == 'all') {
    // list.value = showType.value ? dongAll : areaAll
    tableList.value = areaAll.value.map(item => {
      item.area = Number(item.coverage) >= 100 ? '-' : item.coverage
      item.dong = dongAll.value.find(v => v.id == item.id).coverage
      return item
    })
  } else {
    // list.value = showType.value ? dongCheck : areaCheck
    tableList.value = areaCheck.value.map(item => {
      item.area = Number(item.coverage) >= 100 ? '-' : item.coverage
      item.dong = dongCheck.value.find(v => v.id == item.id).coverage
      return item
    })
  }
  listTable.value.setScrollTop(0)
}
</script>
<style lang='scss' scoped>
.subheadings {
  width: 450px;
  height: 105px;
  background-size: 100% 100%;
  background-image: url('@/assets/images/common/bg_little_title.png');
  margin: 0 auto;
  color: #E4F5FF;
  font-size: 22px;
  font-family: Source Han Sans;
  font-weight: 500;
  line-height: 80px;
  text-align: left;
  box-sizing: border-box;
  padding-left: 40px;

  .el-button--primary {
    background: transparent !important;
    border: none !important;
    float: right;
    margin-top: 20px;
    margin-right: 18px;
    color: #1A76FF !important;
    font-size: 14px;
    cursor: pointer;

    svg {
      width: 14px;
    }
  }
}

.assy {
  // margin-top: -55px;

  .list {
    // width: 430px;
    height: 210px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    // padding: 0 0 10px 10px;
    box-sizing: border-box;

    &-item {
      display: flex;
      text-align: right;

      span {
        display: block;
        line-height: 30px;
        width: 90px;
      }

      .bar {
        width: 300px;
        height: 8px;
        background: rgba(0, 0, 0, .3);
        border-radius: 0px 5px 5px 0px;
        margin: 14px 10px;
        position: relative;

        &-inner {
          display: block;
          height: 8px;
          background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
          // border-radius: 0px 5px 5px 0px;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -3px;
            transform: translateY(-50%);
            background-position: center;
            width: 13px;
            height: 13px;
            background: #E9FFFF;
            box-shadow: 0px 0px 14px 1px #46FFFF;
            border-radius: 13px;
            border: 2px solid #46FFFF;
          }
        }
      }

      span.rate {
        color: #46FFFF;
        width: 30px;
      }
    }

    &-table {
      color: #fff;
      background-color: transparent;

      :deep(.el-table__inner-wrapper) {
        background-color: transparent;

        .el-table__header tr {
          background-color: transparent;

          th.el-table__cell {
            background-color: transparent;
          }
        }

        .el-table__row:hover>td.el-table__cell {
          background-color: rgba(71, 90, 219, 0.35);
        }
      }
    }
  }
}

// .el-tabs {
//   position: absolute;
//   // top: -55px !important;
//   top: -70px !important;
//   right: 0;
// }
.el-tabs {
  color: #fff;

  :deep(.el-tabs__header .el-tabs__item) {
    color: #fff !important;
  }
}</style>